<template>
 <div class="songlist">
 	 <li  class="song-item flex middle" v-for="(song,index) in songs" @click="selectItem(song,index)">
   <span v-show="rank" class="mr10 rankindex center" :class="getRankCls(index)">{{getRankText(index)}}</span>
   <div class="cell-main">
     <div class="l mb10">{{song.name}}</div>
          <div class="l hui">{{getDesc(song)}}</div>
   </div>

        </li>
 </div>
</template>

<script type="text/ecmascript-6">
export default{
  name:'',
  props:{
  	songs:{
  		type:Array,
  		default:[]
  	},
    rank:{
      type:Boolean,
      default:false
    }
  },
  data(){ return{}},
  methods:{
    selectItem(item,index){
      this.$emit('select',item,index)
    },
    // 设置 详情
  	getDesc(song){
  		return `${song.singer}-${song.album}`
    },
    // 设置icon
    getRankCls(index){
      if(index<=2){
        return `iconfont icon-trophy color${index}`
      }else{
        return `text xl color0`
      }
    },
    getRankText(index){
 if(index>2){
        return index+1
      }
    }
  },
  components:{}
}
</script>

<style rel="stylesheet" lang="less">
        .song-item{
      padding: 0.8rem 1.2rem;
      box-sizing: border-box;
    }
    .icon-trophy{
      font-size:20px;
    }
    .color0{
     color: #ffd332
    }
    .color1{
     color: #c9c9c9
    }
    .color2{
     color: #fdb61b
    }
    .rankindex{
      width: 20px;
      height: 20px;
    }
</style>
